<template>
	<view class="main">
		<video :src="mData.path" :controls="controls" class="video"  ></video>
		<view class="title"></view>
		<view class="btn"  @click="openPop">查看产业园</view>
		<view class="row" v-if="mData. synopsis">
			<image src="../../../static/images/detail-desc.png"  class="icon"></image>
			<view class="item-title">视频简介</view>
		</view>
		<view class="desc">{{ mData. synopsis}}</view>
		
		<view class="row" v-if="mData. content">
			<image src="../../../static/images/detail-desc.png" class="icon"></image>
			<view class="item-title">项目简介</view>
		</view>
		<view class="desc">{{ mData. content}}</view>
		
		<uni-popup ref="popup" type="bottom" >
			<view class="pop">
			        <image src="'../../../static/images/nav-x.png'" class="pop-close" @click="closePop()">
					</el-image>
			        <view class="pop-title">选择查看方式</view>
			        <view class="pop-row">
			            <view class="pop-item" @click="go720()" style="margin-right:32rpx">
							   <image src="../../../static/images/720.png" class="pop-img">
			                <view class="pop-text">720°全景</view>
			            </view>
			            <view class="pop-item" @click="goTuwen()" style="margin-left:32rpx">
			                <image src="../../../static/images/tuwen.png" class="pop-img"></image>
			                <view class="pop-text">图文介绍</view>
			            </view>
			        </view>
			    </view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		  props: {
		    id1: String
		  },
		data() {
			return {
				 id: ''
				      , mData: {}
				      , showPop: false
				      , detail: {}
			}
		}
		  , mounted() {
		    if (this.id1) {
		      this.id = this.id1
		      this.getData()
		    }
		    console.log('this.id111', this.id)
		  },

		methods: {
			closePop(){
					this.$refs.popup.close()
			},
			openPop(){
					this.$refs.popup.open('center')
			},
			go720() {
				if (!this.detail.multVrUrl) {
					this.$noIconTost('没有配置VR地址')
					return
				}
				this.closePop()
				window.open(this.detail.multVrUrl, '_blank')
			}
			
			,
			goTuwen() {
				if (!uni.getStorageSync('token')) {
					this.$noIconTost('请先登录')
				} else {
					this.closePop()
					this.$emit('goDetail', this.detail.id)
				}
			},
			 getId(id) {
			      this.id = id
			      this.getData()
			    }
			    , async getDetail(id) {
					
					let res = await this.$req({
						url: `/palm_peninsula/park/${id}`,
						method:'get',
						data:{
						}
					})
					
			      if (res.code == 200) {
			        this.detail = res.data
			      }
			    }
			
			    , go720() {
			      if (!this.detail.multVrUrl) {
			        this.noIconTost('没有配置VR地址')
			        return
			      }
			      this.showPop = false
			      window.open(this.detail.multVrUrl, '_blank')
			    }
			
			    , goTuwen() {
			      if (!uni.getStorageSync('token')) {
			        this.noIconTost('请先登录')
			      } else {
			        this.showPop = false
			        console.log('goDetail11', this.detail.id)
			        this.$emit('goDetail', this.detail.id)
			      }
			    }
			    , async getData() {
					let res = await this.$req({
						url: `/palm_peninsula/video/${this.id}`,
						method:'get',
						data:{
						}
					})
			      if (res.code == 200) {
			        this.mData = res.data
			        this.getDetail(this.mData.parkId)
			      }
			    }
		}
	}
</script>

<style lang="scss" scoped>
	
	.main{
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: white;
		min-height: 100vh;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.video{
		width: 100%;
		height: 100vw;
	}
	.title{
		margin-left: 24rpx;
		margin-top: 60rpx;
		font-size: 56rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 56rpx;
	}
	.btn{
		margin-left: 24rpx;
		margin-top: 48rpx;
		width: 224rpx;
		height: 80rpx;
		background: #D33330;
		border-radius: 4rpx;
		border: 2rpx solid #D33330;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 32rpx;
	}
	.row{
		margin-top: 96rpx;
		margin-left: 24rpx;
		display: flex;
	}
	.icon{
		width: 64rpx;
		height: 64rpx;
	}
	.item-title{
		font-size: 48rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
	}
	.desc{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 56rpx;
	}
	.pop {
	    width: calc(100% );
	    height: 612rpx;
	    background: linear-gradient(180deg, #F3F5F8 0%, #FAFBFC 100%);
	    box-shadow: 12rpx 12rpx 80rpx 0px rgba(0, 20, 77, 0.1);
	    border-radius: 8rpx;
	    border: 8rpx solid #FFFFFF;
	    display: flex;
	    position: relative;
	    flex-direction: column;
	}
	
	.pop-close {
	    top: 32rpx;
	    right: 32rpx;
	    width: 48rpx;
	    height: 48rpx;
	    position: absolute;
	}
	
	.pop-title {
	    margin-top: 60rpx;
	    width: 100%;
	    display: flex;
	    justify-content: center;
	    font-size: 40rpx;
	    font-weight: 600;
	    color: #111F3A;
	    line-height: 56rpx;
	}
	
	.pop-row {
	    margin-left: 48rpx;
	    margin-right: 48rpx;
	
	    margin-top: 52rpx;
	    display: flex;
	    justify-content: space-between;
	}
	
	.pop-img {
	    width: 304rpx;
	    height: 304rpx;
	}
	
	.pop-item {
	    width: 256rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    cursor: pointer;
	}
	
	.pop-text {
	    margin-top: 24rpx;
	    font-size: 32rpx;
	    font-weight: 500;
	    color: #111F3A;
	    line-height: 48rpx;
	}
	
</style>
